import { useState } from "react";
import "./index.scss";
interface IndexProps {
  title: string;
  Processingimg: string;
  ProcessingMp4: string;
  hot: string;
}

const Index: React.FC<IndexProps> = ({
  Processingimg,
  title,
  ProcessingMp4,
  hot,
}) => {
  const [transformImg, setTransformImg] = useState("scale(1)");
  const [imgs, setImgs] = useState("block");
  const [videos, setVideos] = useState("none");
  const handleImg = () => {
    if (ProcessingMp4 !== "") {
      setImgs("none");
      setVideos("block");
    } else {
      setImgs("block");
      setTransformImg("scale(1.05)");
    }
  };
  const handleVideo = () => {
    if (ProcessingMp4 !== "") {
      setImgs("block");
      setVideos("none");
    } else {
      setTransformImg("scale(1)");
    }
  };
  return (
    <div
      className="processingc"
      onMouseEnter={handleImg}
      onMouseLeave={handleVideo}
    >
      <div className="processingc_text">
        <div>{title}</div>
        {hot !== "" ? (
          <div>
            <img src={hot} alt="" />
          </div>
        ) : (
          ""
        )}
      </div>
      <div className="processingc_box">
        <div className="processingc_img" style={{ display: imgs }}>
          <img style={{ transform: transformImg }} src={Processingimg} alt="" />
        </div>
        <div style={{ display: videos, transition: "transform 0.3s ease" }}>
          {ProcessingMp4 !== "" ? (
            <video
              src={ProcessingMp4}
              muted
              loop
              autoPlay
              className="processingc_video"
            ></video>
          ) : (
            ""
          )}
        </div>
      </div>
    </div>
  );
};

export default Index;
